<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>进入页面（待完善）</title>
</head>
<style type="text/css">
    body {
        background:url("/img/background.jpg")  no-repeat center center;   /*加载背景图*/   /* 背景图不平铺 */
        background-size:cover;  /* 让背景图基于容器大小伸缩 */
        background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    /*此条属性必须设置否则可能无效*/
        background-color:#CCCCCC;   /* 设置背景颜色，背景图加载过程中会显示背景色 */
    }
    #main {
        position: relative;
        top: 300px;
        text-align: center;
    }

    .enterprise,
    .bank {
        width: 300px;
        height: 300px;
        background-color: #ffffff;
        border: 1px solid #3eacca;
        border-radius: 30px;
        display: inline-block;
        padding: 10px;
    }

    span {
        font-size: 1.2em;
    }

    .spot {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .svg-wrapper {
        margin-top: 0;
        position: relative;
        top: 25%;
        width: 150px;
        height: 40px;
        display: inline-block;
        border-radius: 3px;
        margin-left: 5px;
        margin-right: 5px
    }

    #shape {
        stroke-width: 6px;
        fill: transparent;
        stroke: #009FFD;
        stroke-dasharray: 85 400;
        stroke-dashoffset: -220;
        transition: 1s all ease;
    }

    #text {
        margin-top: -35px;
        text-align: center;
    }

    #text a {
        color: #000;
        text-decoration: none;
        font-weight: 100;
        font-size: 1.1em;
    }

    .svg-wrapper:hover #shape {
        stroke-dasharray: 50 0;
        stroke-width: 3px;
        stroke-dashoffset: 0;
        stroke: #06D6A0;
    }

</style>
<body>
    <div id="main">
        <div class="enterprise">
            <p>
                <span>学生端请前往</span>
                <div class="svg-wrapper">
                    <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                        <rect id="shape" height="40" width="150" />
                        <div id="text">
                            <a href="/index/question_part"><span class="spot"></span>学生端</a>
                        </div>
                    </svg>
                </div>
            </p>
        </div>

        <div class="bank">
            <p>
                <span>教师端请前往</span>
                <div class="svg-wrapper">
                    <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                        <rect id="shape" height="40" width="150" />
                        <div id="text">
                            <a href="/index/analyse"><span class="spot"></span>教师端</a>
                        </div>
                    </svg>
                </div>
            </p>
        </div>
    </div>
</body>

</html>